<script>
import dayjs from 'dayjs'
import ProductView from "./product/ProductView"
export default {
  components: {
    ProductView
  },
  data() {
    return {
      /*  商品状态，设备加密方式，设备芯片类型 */
      proTypeList: [],
      verMethodList: [],
      deviceChipList: [],

      // 筛选需要的名字
      filter: {
        productName: '',
        categoryName: '',
        status: ''
      },
      page: {
        pageNum: 1,
        pageSize: 12,
        total: 0
      },
      // 表格相关状态
      table: {
        data: [],
        loading: false
      },
      // 弹出框
      dialogVisible: false,
      categoryId: null,

      // 表单相关的状态和校验规则
      ruleForm: {
        categoryName: '',
        orderNum: '',
        remark: ''
      },
      rules: {
        categoryName: [{ required: true, message: '产品分类名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取商品状态列表
    async queryProductTypeList() {
      let data = await this.$API.product.queryProductType()
      this.proTypeList = Object.freeze(data)
    },

    // 获取设备加密方式列表
    async queryVerMethodList() {
      let data = await this.$API.product.queryVerMethod()
      this.verMethodList = Object.freeze(data)
    },
    // 获取设备芯片类型列表
    async queryDeviceChipList() {
      let data = await this.$API.product.queryDeviceChip()
      this.deviceChipList = Object.freeze(data)
    },

    // 获取商品列表
    async initData() {
      this.table.loading = true
      let {
        page: { pageNum, pageSize },
        filter: { productName, categoryName, status }
      } = this

      try {
        let { code, rows, total } = await this.$API.product.queryProductList({
          pageNum,
          pageSize,
          productName,
          categoryName,
          status
        })
        if (+code !== 200) {
          return
        }
        this.table.data = Object.freeze(rows)
        this.page.total = total
      } catch (_) { }
      this.table.loading = false
    },

    // ----------

    // 重置按钮
    resetFilter() {
      this.filter.productName = ''
      this.filter.categoryName = ''
      this.filter.status = ''
      this.initData()
    },

    // 触发搜索按钮
    triggerSearch() {
      // 当在其他页码搜索时，直接跳转到第一页
      this.page.pageNum = 1
      this.initData()
    },
    // 触发新增按钮
    insertCategory() { },
    // 关闭弹出框
    async closeDialog() { },
    // 确认按钮
    async submit() { },
  },
  created() {
    /* 获取商品状态，设备加密方式，设备芯片类型 列表 */
    this.queryProductTypeList()
    this.queryVerMethodList()
    this.queryDeviceChipList()

    // 获取商品列表
    this.initData()
  },
  watch: {

  }
}
</script>

<template>
  <div class="product-box">

    <!-- 筛选过滤区域 -->
    <el-card class="filter-box">
      <div class="filter">
        <div class="form-demo">
          <label>产品名称</label>
          <el-input placeholder="请输入产品名称" v-model.trim="filter.productName" @keydown.native.enter="triggerSearch" />
        </div>
        <div class="form-demo">
          <label>分类名称</label>
          <el-input placeholder="请输入产品分类名称" v-model.trim="filter.categoryName" @keydown.native.enter="triggerSearch" />
        </div>
        <div class="form-demo">
          <label>状态</label>

          <el-select placeholder="请选择状态" v-model="filter.status">
            <el-option v-for="item in proTypeList" :key="item.dictSort" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </div>
        <div class="form-demo">
          <button-again icon="el-icon-search" type="primary" size="small" @click="triggerSearch">搜索</button-again>
          <el-button icon="el-icon-refresh" size="small" @click="resetFilter">重置</el-button>
        </div>
      </div>
      <div class="handle">
        <el-tag class="el-icon-plus" @click="insertCategory">新增</el-tag>
      </div>
    </el-card>

    <!-- 表单区域 -->
    <el-card class="table-box" v-loading="table.loading">
      <el-row class="product-box" :gutter="10">
        <ProductView :tableList="table.data" />
      </el-row>

      <el-pagination background layout="total, sizes, prev, pager, next" hide-on-single-page :total="page.total"
        :current-page.sync="page.pageNum" :page-size.sync="page.pageSize" @size-change="initData"
        @current-change="initData">
      </el-pagination>

    </el-card>

    <!-- 弹出层 -->
    <el-dialog title="产品分类" top="5vh" width="500px" :visible="dialogVisible" :before-close="closeDialog"
      :close-on-click-modal="false" :close-on-press-escape="false">

      <el-form label-width="85px" :model="ruleForm" :rules="rules" ref="formIns">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input placeholder="请输入产品分类名称" v-model.trim="ruleForm.categoryName" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input-number controls-position="right" v-model="ruleForm.orderNum"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" placeholder="请输入产品分类名称" v-model.trim="ruleForm.remark" />
        </el-form-item>
      </el-form>

      <template #footer>
        <button-again type="primary" @click="submit">确认提交</button-again>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.product-box {
  .filter-box {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
      // flex-wrap: wrap;

      .filter {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .form-demo {
          margin-right: 10px;
          margin-bottom: 10px;

          label {
            padding-right: 10px;
          }

          .el-input {
            width: 200px;

            .el-input__inner {
              height: 30px;
              line-height: 30px;
            }
          }
        }
      }

      .handle {
        .el-tag {
          cursor: pointer;
        }
      }
    }
  }

  .table-box {
    margin-top: 10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

    .product-box {
      margin-left: -15px;
      margin-right: -15px;
    }

    .el-pagination {
      margin-top: 15px;
      text-align: right;
    }
  }

  .el-table::before {
    height: 0;
  }
}

.el-container--xl {
  width: 1660px;
}
</style>